<script setup>
import { ref } from "vue";
import { pageTableData } from "@/api/LogList";
import { ElMessage } from 'element-plus';

//----------- 数据定义 ---------------------------
const logs = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
//----------- 方法定义 ---------------------------
const getTableData = () => {
  pageTableData(currentPage.value,pageSize.value)
      .then((res) => {
        logs.value = res.data.records;
        total.value = res.data.total;
      })
      .catch((err) => {
        console.error('获取日志数据失败:', err);
        ElMessage.error('获取日志数据失败');
      });
};
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}
// 初始化加载数据
getTableData();
</script>

<template>
  <div class="container">
    <!-- 顶部标题 -->
    <div id="title">日志记录</div>

    <!-- 商品表格 -->
    <el-table :data="logs" border style="width: 100%" class="mt-20">
      <el-table-column prop="operateEmpId" label="operateEmpId" width="200" align="center" />
      <el-table-column prop="operateTime" label="操作时间" width="220" align="center" />
      <el-table-column prop="className" label="className" width="350" align="center" />
      <el-table-column prop="methodName" label="methodName" width="220" align="center" />
      <el-table-column prop="methodParms" label="methodParms" width="220" align="center" />
      <el-table-column prop="costTime" label="costTime" width="200" align="center" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />


  </div>
</template>
<style scoped lang="scss">
.container {
  padding: 24px;
  background-color: #f9fafc;
  min-height: 100vh;
}

/* 标题区域 */
#title {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  border-left: 4px solid #409eff;
  padding-left: 12px;
  display: flex;
  align-items: center;
}

/* 搜索表单 */
.search-form {
  background-color: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;

  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  .el-form-item {
    margin-bottom: 0;

    .el-input,
    .el-select,
    .el-date-picker {
      width: 220px;

      .el-input__inner {
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        transition: all 0.3s;

        &:focus {
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          border-color: #409eff;
        }
      }
    }
  }

  .el-button {
    height: 36px;
    padding: 0 16px;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-1px);
    }
  }
}

/* 表格区域 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);

  th {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 500;
    padding: 12px 0;
  }

  td {
    padding: 14px 0;
    transition: all 0.2s;

    &:hover {
      background-color: rgba(64, 158, 255, 0.03);
    }
  }

  /* 状态标签样式 */
  .el-tag {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* 操作按钮 */
  .el-button {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 3px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    &.el-button--success {
      background-color: #52c41a;
      border-color: #52c41a;

      &:hover {
        background-color: #73d13d;
        border-color: #73d13d;
      }
    }

    &.el-button--danger {
      background-color: #ff4d4f;
      border-color: #ff4d4f;

      &:hover {
        background-color: #ff7875;
        border-color: #ff7875;
      }
    }
  }
}

/* 分页区域 */
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  padding: 12px 0;

  .el-pager li {
    transition: all 0.3s;

    &:hover {
      transform: translateY(-1px);
    }
  }

  .el-pagination__sizes .el-input .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
}

/* 对话框样式 */
.el-dialog {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

  .el-dialog__header {
    background-color: #f5f7fa;
    padding: 16px 20px;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }

  .el-dialog__body {
    padding: 24px 20px;

    .el-input {
      .el-input__inner {
        border-radius: 4px;
        height: 36px;
        line-height: 36px;
        transition: all 0.3s;

        &:focus {
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          border-color: #409eff;
        }
      }

      &.el-textarea .el-textarea__inner {
        padding: 8px 12px;
        border-radius: 4px;
        transition: all 0.3s;

        &:focus {
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          border-color: #409eff;
        }
      }
    }
  }

  .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid #ebeef5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
}

/* 响应式调整 */
@media (max-width: 992px) {
  .search-form {
    .el-form-item {
      width: 100%;
    }
  }
}
</style>